<template>
  <div class="main">
    <el-container style="width: 1200px;">
    <el-main>
      <el-form @submit.prevent="submitFeedback" ref="feedbackForm">
        <el-form-item label="分类">
          <el-select v-model="feedback.category" placeholder="请选择你的建议类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意见/建议">
          <el-input
            type="textarea"
            v-model="feedback.content"
            placeholder="请在这里写下您的意见或建议"
            rows="4"
            required
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFeedback">提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedback: {
        userId: '',
        content: '',
        category: '',
        status: '新增'
      },
      options: [{
          value: '网站问题',
          label: '网站问题'
        }, {
          value: '产品建议',
          label: '产品建议'
        }, {
          value: '服务反馈',
          label: '服务反馈'
        }, {
          value: '其他',
          label: '其他'
        }]
    }
  },
  created() {
    this.feedback.userId = +window.localStorage.getItem('userID')
  },
  methods: {
    async submitFeedback() {
      console.log(this.feedback)
      // 实现提交逻辑，发送请求至后端API
      console.log('反馈已提交: ', this.feedback)
      const { data: res } = await this.$axios.post('/message/add', this.feedback)
      console.log(res)
      // 清空表单
      this.feedback.userId = ''
      this.feedback.content = ''
      this.feedback.category = ''
      alert('感谢您的反馈！')
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
